<template>
    <el-container>
        <el-header>
            <Header />
        </el-header>
        <el-container>
            <el-aside>
                <Aside />
            </el-aside>
            <el-main>
                <hisTags></hisTags>
                <router-view v-slot="{ Component }">
                    <transition name="el-fade-in-linear">
                        <div :key="$route.path">
                            <component :key="route.fullPath" :is="Component" />
                        </div>
                    </transition>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup>
import { onMounted } from "vue";
import Header from "./header.vue"
import Aside from "./aside.vue"
import hisTags from "@/components/his-tags.vue";
import { useRoute } from 'vue-router';

const route = useRoute();
//设置全局主题颜色
const getThemeColor = () => {
    const themeColor = localStorage.getItem('theme-color')
    const subThemeColor = localStorage.getItem('sub-theme-color')
    if (themeColor) {
        document.documentElement.style.setProperty('--theme-color', themeColor)
    }
    if (subThemeColor) {
        document.documentElement.style.setProperty('--sub-theme-color', subThemeColor)
    }
}
onMounted(() => {
    getThemeColor()
})

</script>
<style lang="less">
.el-header {
    padding: 0;
    height: 50px;
}

.el-aside {
    width: auto;
}

//隐藏滚动条
.el-aside::-webkit-scrollbar {
    display: none;
}

.el-main {
    background-color: #f0f2f5;
    height: calc(100vh - 50px);
    padding: 0 10px 10px;

    //全局布局样式
    .content {
        min-height: calc(100vh - 120px);
        background-color: #fff;
        border-radius: 5px;
        padding: 10px;

        .fun {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;

        }

        .table {
            margin-bottom: 10px;
        }
    }
}

//隐藏滚动条
.el-main::-webkit-scrollbar {
    display: none;
}
</style>